<template>
  <div :class="[liveBackBoxClass]" ref="liveback">
    <div class="header-nav">
      <ul v-if="tabIsShow">
        <li @click="getLiveBackData(index,v.id)" :class="{active:cur==index}" v-for="(v,index) in  navTitle"
          :key="index">
          <p>{{v.title}}</p>
        </li>
      </ul>
      <div class="liveback-connect-box">
        <VideoInline :list="liveBackData" :preImagUrl='isPreImagUrl'></VideoInline>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      noNavLength: String, //noNav  没有nav
      roomInfo: Object,
    },
    data() {
      return {
        liveBackBoxClass: '',
        navTitle: [],
        cur: 0,
        liveBackData: [],
        pushLiveBackData: [],
        flag: true,
        page: 1,
        id: "",
        tabIsShow: false,
        isPreImagUrl: true,
        tabClearTime: "",
        getPlatform: fun.getPlatform(), //app wx
      }
    },
    created() {
      //console.log(this.roomInfo.roomInfo.anchor)
      if (this.noNavLength == 'noNav') {
        if (this.$channel == 'zyzq' && this.getPlatform == 'app') {
          this.liveBackBoxClass = 'no-nav-zyzq';
        } else {
          this.liveBackBoxClass = 'no-nav';
        }
      } else {
        if (this.$channel == 'zyzq' && this.getPlatform == 'app') {
          this.liveBackBoxClass = 'live-back-box-zyzq';
        } else {
          this.liveBackBoxClass = 'live-back-box';
        }

      };
      this.getLiveBackTitle()
    },
    mounted() {
      let _this = this;
      _this.$refs.liveback.onscroll = function() {
        let scrollTop = _this.$refs.liveback.scrollTop //198
        let windowHeight = document.documentElement.clientHeight || document.body.clientHeight; //667
        let scrollHeight = _this.$refs.liveback.scrollHeight; //563
        console.log("scrollTop:"+scrollTop+"windowHeight:"+windowHeight+"scrollHeight:"+scrollHeight)
        //_this.flag = false;
        if ((scrollTop + scrollHeight) >= windowHeight && _this.flag) { //198 + 563 = 661       667
          _this.flag = false;
          _this.tabClearTime = setTimeout(function() {
            _this.flag = true;
          }, 500)
          _this.page++
          _this.$http.get('/h5live/getRoomVideoList?p=' + _this.page + '&type=' + _this.id + '&anchor=' + _this
            .roomInfo.roomInfo.anchor).then((res) => {
            if (res.data.code == '000000') {
              //_this.liveBackData = res.data.data;
              //console.log(res.data.data);
              _this.pushLiveBackData = res.data.data
              if (!res.data.data.length) {
                clearTimeout(_this.tabClearTime)
                _this.flag = false;
              }
              for (var i = 0; i < _this.pushLiveBackData.length; i++) {
                _this.liveBackData.push(_this.pushLiveBackData[i]);
              }
              //console.log(_this.liveBackData)
            }
          }, (err) => {
            console.log(err);
          })
        }
      }

    },
    methods: {
      //跳转回看页面
      clickLookBack(id) {
        this.$router.push({
          path: `/${this.$channel}/lookBack_particulars/${id}`
        });
      },
      //直播间回看视频列表table nav
      getLiveBackTitle() {
        let _this = this;
        _this.$http.get('/h5live/getRoomVideoType?anchor=' + _this.roomInfo.roomInfo.anchor).then((res) => {
          const {
            code,
            data
          } = res.data
          if (code == '000000') {
            if (data.length == 0 || data.length == 1) {
              _this.tabIsShow = false;
              _this.$http.get('/h5live/getRoomVideoList?p=1' + '&anchor=' + _this.roomInfo.roomInfo.anchor).then((
                res) => {

                if (res.data.code == '000000') {
                  _this.liveBackData = res.data.data;
                }
              }, (err) => {
                console.log(err);
              })
            } else {
              _this.tabIsShow = true;
              _this.navTitle = res.data.data; //console.log(res.data.data[0].id)
              _this.id = res.data.data[0].id
              _this.getLiveBackData(0, res.data.data[0].id)
            }

          }
        }, (err) => {
          console.log(err);
        })
      },
      //直播间往期回看
      getLiveBackData(index, id) {
        let _this = this;
        _this.cur = index
        _this.flag = true
        _this.id = id
        _this.page = 1
        _this.liveBackData = []
        _this.$http.get('/h5live/getRoomVideoList?p=1' + '&type=' + id + '&anchor=' + _this.roomInfo.roomInfo.anchor)
          .then((res) => {
            //console.log(res.data);
            if (res.data.code == '000000') {
              _this.liveBackData = res.data.data;
              //console.log(_this.liveBackData)
            }
          }, (err) => {
            console.log(err);
          })
      },

    }


  }
</script>

<style scoped="scoped">
  ::-webkit-scrollbar {
    display: none;
    /* Chrome Safari */
  }

  .live-back-box {
    width: 100%;
    height: calc(100vh - 564px);
    background: white;
    padding-top: 20px;
  }

  .live-back-box-zyzq {
    width: 100%;
    height: calc(100vh - 660px);
    background: white;
    padding-top: 20px;
  }

  .no-nav {
    width: 100%;
    height: calc(100vh - 494px);
    background: white;
    padding-top: 20px;
  }

  .no-nav-zyzq {
    width: 100%;
    height: calc(100vh - 690px);
    background: white;
    padding-top: 20px;
  }

  .live-back-box .header-nav ul+.liveback-connect-box {
    height: calc(100vh - 632px);
    overflow-y: scroll;
  }

  .live-back-box-zyzq .header-nav ul+.liveback-connect-box {
    height: calc(100vh - 728px);
    overflow-y: scroll;
  }

  .live-back-box .header-nav .liveback-connect-box {
    height: calc(100vh - 564px);
    overflow-y: scroll;
  }

  .live-back-box-zyzq .header-nav .liveback-connect-box {
    height: calc(100vh - 660px);
    overflow-y: scroll;
  }

  .no-nav .header-nav .liveback-connect-box {
    height: calc(100vh - 554px);
    overflow-y: scroll;
  }

  .no-nav-zyzq .header-nav .liveback-connect-box {
    height: calc(100vh - 650px);
    overflow-y: scroll;
  }

  .no-nav .header-nav ul+.liveback-connect-box {
    height: calc(100vh - 635px);
    overflow-y: scroll;
  }

  .no-nav-zyzq .header-nav ul+.liveback-connect-box {
    height: calc(100vh - 731px);
    overflow-y: scroll;
  }

  .liveback-connect-box .h-great-list /deep/ li {
    margin-top: 0;
    margin-bottom: 20px;
  }

  .header-nav>ul {
    width: calc(100vw - 60px);
    margin: 0 auto;
    padding-bottom: 20px;
    display: flex;
    overflow-x: scroll;
  }

  .header-nav ul li {
    flex-shrink: 0;
    min-width: 130px;
    padding: 14px 28px;
    margin-right: 15px;
    text-align: center;
    line-height: normal;
    font-size: 26px;
    font-weight: 400;
    color: #B5B5B5;
    ;
    background: #F6F6F6;
    border-radius: 15px;
  }

  .header-nav ul li.active {
    background: rgb(204, 53, 56);
    color: white !important;
    border-radius: 15px;
  }
</style>
